<template>
  <view class="panel-section">
    <view class="am-flex-rc-between panel-section__header">
      <view class="panel-section__title">{{ title }}</view>
      <view><slot name="headerRight"></slot></view>
    </view>
    <view class="panel-section__content">
      <view
        class="panel-section__item am-flex-col-center"
        v-for="(item, index) in content"
        :key="index"
        @click="sectionItemHandle(item)"
        :style="'width:' + flex + '%'"
        :hover-class="
          item.hoverClass === 'none' ? 'none' : 'panel-section-item--hover'
        "
      >
        <view class="panel-section-item__icon-box"
          ><image
            :src="item.icon"
            webp
            class="panel-section-item__icon-img"
          ></image
          ><view class="panel-section-item__num" v-if="item.num">{{
            item.num
          }}</view></view
        >
        <view class="panel-section-item__name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /**
     * 标题
     * */
    title: {
      type: String
    },
    /**
     * 内容
     * [{name: '', icon: '', hoverClass: ''}]
     * */
    content: {
      type: Array,
      default: () => []
    },
    /**
     * 布局
     * */
    flex: {
      type: Number,
      default: 20
    }
  },
  methods: {
    sectionItemHandle(item) {
      this.$emit('itemHandle', { value: item })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-section {
  background: #ffffff;
  border-radius: 24rpx;
}
.panel-section__header {
  padding-left: 39rpx;
  padding-top: 29rpx;
  padding-bottom: 8rpx;
}
.panel-section__title {
  font-weight: 600;
  font-size: 32rpx;
  color: #1d2129;
  line-height: 44rpx;
}
.panel-section__content {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 6rpx;
}
.panel-section__item {
  width: 20%;
  padding-bottom: 28rpx;
  padding-top: 22rpx;
}
.panel-section-item--hover {
  background-color: rgba(#000, 0.1);
  opacity: 0.7;
}
.panel-section-item__icon-box {
  position: relative;
}
.panel-section-item__icon-img {
  display: block;
  width: 60rpx;
  height: 60rpx;
}
.panel-section-item__name {
  margin-top: 27rpx;
  font-size: 26rpx;
  color: #1d2129;
  line-height: 36rpx;
}
.panel-section-item__num {
  position: absolute;
  top: -15rpx;
  right: -14rpx;
  background: #f5222d;
  color: #fff;
  border-radius: 50%;
  width: 36rpx;
  height: 36rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 20rpx;
}
</style>
